<template>
  <view class="chat-container">
    <!-- 顶部标题 -->
    <view class="chat-header">
      <text class="chat-title">智能客服对话</text>
    </view>

    <!-- 对话窗口 -->
    <scroll-view
        class="chat-messages"
        :scroll-y="true"
        :scroll-into-view="scrollTo"
        scroll-with-animation>
      <view v-for="(msg, index) in messages" :key="index" :id="'msg' + index" :class="['message-item', msg.from]">
        <view class="avatar" :class="msg.from"></view>
        <view class="message-content">{{ msg.content }}</view>
      </view>
    </scroll-view>

    <!-- 输入框区域 -->
    <view class="chat-footer">
     <view>
       <u-input
           v-model="userInput"
           placeholder="请输入问题"
           confirm-type="send"
           @confirm="sendMessage"
           :maxlength="500"
           class="chat-input" />
     </view>
      <u-button
          type="primary"
          class="send-btn"
          @click="sendMessage">
        发送
      </u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import {chat} from '@/api/AIService.js'

const userInput = ref('')
const messages = ref([{ from: 'ai', content: '您好，我是AI客服，有什么可以帮您的吗？' }])
const scrollTo = ref('')
const storeId = ref(null)

const sendMessage = () => {
  if (!userInput.value.trim()) return;

  const message = userInput.value;
  messages.value.push({ from: 'user', content: message });
  userInput.value = '';
  scrollToBottom();
    // 调用后端接口获取回答
  console.log(message,"-------57")
  storeId.value = 3 ;
  chat(message,storeId.value).then(res => {
    console.log((res,"------56"));
    const answer = res.answer || '网络繁忙，请重试';
    messages.value.push({ from: 'ai',content: answer });
  })
    .catch(() =>{
      messages.value.push({ from: 'ai',content: '网络错误，请重试'  });
   })
  nextTick(() => scrollToBottom());
}

const scrollToBottom = () => {
  scrollTo.value = 'msg' + (messages.value.length - 1);
}
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.chat-header {
  height: 50px;
  background-color: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-title {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.chat-messages {
  flex: 1;
  padding: 10px;
  background-color: #fff;
  overflow-y: auto;
}

.message-item {
  display: flex;
  margin: 8px 0;
  align-items: flex-start;
}

.message-item.user {
  justify-content: flex-end;
}

.message-item.ai {
  justify-content: flex-start;
}

.avatar {
  width: 40px;
  height: 40px;
  background-color: #007aff;
  border-radius: 50%;
  margin: 0 8px;
}

.avatar.user {
  background-color: #007aff;
}

.avatar.ai {
  background-color: #999;
}

.message-content {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  background-color: #f1f1f1;
}

.message-item.user .message-content {
  background-color: #007aff;
  color: #fff;
}

.chat-footer {
  display: flex;
  padding: 8px;
  background-color: #eee;
  border-top: 1px solid #ccc;
}

.chat-input {
  flex: 1;
  margin-right: 8px;
}

.send-btn {
  width: 20px;
}
</style>
